<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
    <div id="app">
        <input type="text" v-model="msg" />
        {{msg}}

        {{age}}
        <hr>
        {{obj.name}}
    </div>

    <script src="js/vue.js"></script>
    <script>

       let vm=  new Vue({
             el:"#app",
             data:{
                 msg:"ok",
                 age:18,
                 obj:{
                     name:"jack"
                 }
             },
             methods: {
                 
             },
             watch:{ //data中的数据
                    msg(newVal,oldVal){

                        console.log(`new${newVal},old${oldVal}`)

                    },
                    age(nval,oval){
                        console.log(nval,oval)
                    },
                    "obj.name"(nval,oval){
                        console.log(nval,oval)
                    },

                    obj:{ // 深度监听是整个对象
                        handler(n,o){
                           console.log(n,o)
                        },
                        deep:true
                    }

             }
         })
    </script>
</body>
</html>